<template>
	<el-dialog
	  v-model="dialog.visible"
	  :title="dialog.title"
	  destroy-on-close
	  :close-on-click-modal="false"
	  append-to-body
	  width="450px"
	  class="editor-dialog-c"
	  draggable
	  @close="resetForm"
	> 

		<el-form
		  ref="userFormRef"
		  :model="formData"
		  :rules="userFormRules"
		  label-width="100px"
		>
<!-- 			<el-form-item label="缩略图" prop="name">
				<el-upload
				  class="avatar-uploader"
					ref="upload"
					:auto-upload="false"
					:show-file-list="false"
					:on-change="handleChange"
				>
				  <img v-if="imageUrl" :src="imageUrl" class="avatar" width="120" height="120">
				  <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
				</el-upload>
			</el-form-item> -->
			
<!-- 			<el-form-item label="所属分类" prop="classifyId">
				  <el-tree-select 
				  v-model="formData.classifyId" 
				  :props="props" 
				  :data="deptOptions" 
				  :render-after-expand="true" 
					check-strictly
				  style="width: 100%;" />
			</el-form-item> -->

			<el-form-item label="名称" prop="name">
			  <el-input v-model="formData.name" placeholder="请输入名称" />
			</el-form-item>
			
			<el-form-item label="标识" prop="code">
			  <el-input v-model="formData.code" placeholder="请输入标识" />
			</el-form-item>
			
			<el-form-item label="类型" prop="type">
				<dictionary v-model="formData.type" type-code="thingmodel_type" style="width: 100%;" />
			</el-form-item>
			
			<el-form-item label="状态" prop="status">
			  <el-radio-group v-model="formData.status">
				<el-radio value="1">启用</el-radio>
				<el-radio value="0">禁用</el-radio>
			  </el-radio-group>
			</el-form-item>
			
			<el-form-item label="显示排序" prop="sort">
				<el-input-number
					v-model="formData.sort"
					controls-position="right"
					style="width: 100px"
					:min="0"
				/>
			</el-form-item>
			
		</el-form>

		<template #footer>
		  <div class="dialog-footer">
				<el-button color="#626aef" @click="submitForm"  :loading="loading">确 定</el-button>
				<el-button color="#1e1e1e" @click="closeDialog" :loading="loading">取 消</el-button>
		  </div>
		</template>

	</el-dialog>
</template>

<script lang="ts" setup>
	
	import { saveThingmodel} from "@/api/sys/thingmodel";
	import type {FormRules } from 'element-plus'
	import { Plus } from '@element-plus/icons-vue'
	
	const imageUrl = ref('');
	const loading = ref(false);
	const dialog = ref({
		visible:false,
		title:'',
	});
	
	const userFormRef=ref();
	const userFormRules=reactive<FormRules>({
	  name: [{ required: true, message: "参数必填", trigger: "blur" }],
	  code: [{ required: true, message: "参数必填", trigger: "blur" }],
	  type: [{ required: true, message: "参数必填", trigger: "blur" }],
	});
	
	const formData=reactive<any>({
		id:'',
		name:'',
		code:'',
		type:'',
		status:'0',
		source:'unreal',
		sort:0,
		thumbnailFile:null,
	})

	const props = {
	  label: 'name',
	  value:'id',
	  children: 'children',
	}
	

	const handleChange=(file:any)=> {
		formData.thumbnailFile=file.raw;
		imageUrl.value = URL.createObjectURL(file.raw);
	}

	const openDialog=(row:any,type:string)=>{
		if('add'==type){
			dialog.value.visible=true;
			dialog.value.title='新增';
			Object.assign(formData, {source:'unreal'});
		}else{
			dialog.value.visible=true;
			dialog.value.title='编辑';
/* 			if(row.id){
			  imageUrl.value=import.meta.env.VITE_APP_BASE_API+'/file/thumbnail/'+row.id+"?"+ new Date().getTime()
			} */
			Object.assign(formData, {
				id:row.id,
				name:row.name,
				code:row.code,
				type:row.type,
				source:row.source,
				sort:row.sort,
				status:row.status,
				thumbnail:row.thumbnail,
			});
		}
	}
	
	const submitForm=()=>{
		userFormRef.value.validate((isValid: boolean) => {
		  if (isValid) {
				loading.value=true;
				saveThingmodel(formData)
				.then((res:any) => {
					ElMessage.success(res.msg);
					closeDialog();
				})
				.catch((e:any) => {
					console.error(e)
				})
				.finally(() => {
					loading.value=false;
				});
		  }
		});
	}
	
	const emits = defineEmits(['closeDialog'])
	const closeDialog=()=>{
		dialog.value.visible=false;
		dialog.value.title="";
		emits('closeDialog',formData)
		resetForm();
	}
	
	function resetForm() {
	  userFormRef.value.resetFields();
	  userFormRef.value.clearValidate();
	  formData.id = "";
	  formData.name= "";
	  formData.code= "";
	  formData.type= "";
	  formData.source= "unreal";
	  formData.status= "0";
	  formData.sort= 0;
	  formData.thumbnail = "";
	  formData.thumbnailFile=null;
	  imageUrl.value='';
	}	
	
	defineExpose({
	  openDialog,closeDialog
	});
	
	onMounted(() => {
	});
	onBeforeUnmount(() => {
	});
</script>

<style scoped>
	:deep(.avatar-uploader .el-upload){
	  border: 1px dashed #ccc;
	  border-radius: 6px;
	  cursor: pointer;
	  position: relative;
	  overflow: hidden;
	  width: 7.5rem;
	  height: 7.5rem;
	}
	
	.avatar-uploader .el-upload:hover {
	  border-color: var(--el-color-primary);
	}
	
	.el-icon.avatar-uploader-icon {
	  font-size: 28px;
	  color: #8c939d;
	  width: 178px;
	  height: 178px;
	  text-align: center;
	}
</style>